<!-- the detail of a project -->
<?php 
//设置标题
$_title="详细模块信息";
include_once("../header.php")
 ?>

<body class="metrouicss">
  <style>
   sponsorBlock li
   {
     font-size:14px;
     margin:10px;
   }
  </style>
    <!-- 引入javascript -->
    <script type="text/javascript" src="../../js/jqplot/jquery.jqplot.min.js"></script>
    <link href="../../js/jqplot/jquery.jqplot.min.css" type="text/css" rel="stylesheet"></link>
    <?php 
    $srcNames = array("cursor","dateAxisRenderer","canvasTextRenderer","canvasAxisTickRenderer","categoryAxisRenderer","barRenderer","json2");
    foreach($srcNames as $src)
    {
    ?>
    <script type="text/javascript" src="../../js/jqplot/plugins/<?= "jqplot.".$src.".min.js" ?>" ></script>
    <?php } ?>
    <!-- top -->
    <?php include_once("../menu.php") ?>
    <div id="page-index" class="page">
      <div class="page-region">
        <div class="page-region-content">
          <!-- grid1 -->
          <div class="grid">
            <!-- 图表展示 -->
            <div class="row">
              
              <!-- 图表 -->
              <div class="span12">
                  <div id="chart1" style="background:#F1F1F1;">
                  </div>
              </div>
              
            </div>
          </div>          
          <!-- grid1 end -->
          <!-- grid2 -->
          <div class="grid">
            <div class="row" style="overflow:hidden;">
              <div style="width:200%;position:relative;" id="ct">
                <div id="allLog" style="float:left;width:50%;height:450px;">
                  <div class="grid">
                    <div class="row">
                      <div>
                        <span style="font-size:29px;">所有日志</span>
                        <input type="button" value="添加日志" style="margin-left:300px;" onclick="addLog()"/>
                      </div>
                    </div>
                    <div class="row">
                      <div class="span7">
                        2012-12-12 这是用户管理日志，第一天，完成初始化操作，表格设计操作
                      </div>
                      <div class="span3">
                        删除&nbsp;编辑
                      </div>
                    </div>
                  </div>
                </div>
                <div id="detailLog" style="margin-left:20px;">
                  <div onclick="javascript:$('#ct').animate({left:'0'},2000,function(){$('#allLog').css('background','white');})">
                    <h1>
                      <i class="icon-arrow-left-3"></i>详细<span style="font-size:24px">日志Detail</span>
                    </h1>
                  </div>
                  <p>
                    <a>Date</a>
                    <a name="dtcreate">adfa</a>                    
                  </p>
                  <p>
                    <a>title</a>
                    <a name="strtitle"></a>
                  </p>
                  <p>
                    <a>strbody</a>
                    <a name="strbody"></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- grid2 end -->
          <input type="button" value="click" id="btn"/>
        </div>
      </div>
    </div>
    <?php include_once("../bottom.php") ?>
    <script>
     $(document).ready(function()
                       {       
                        $("#btn").toggle(function(){$("#ct").animate({left:'-800px'},300,function(){$("#allLog").css("background",'#0099CC');});},function(){$("#ct").animate({left:'0'},2000,function(){$("#allLog").css("background",'white');});});
                        asyncMethod('ctl=Module&ac=sum',null,render);
                        asyncMethod('ctl=Log&ac=query',{"strmid":'<?= $_GET['strmid'] ?>'},initLog);
                        });
     //ajax method
     function asyncMethod(url,asyncData,callback,method='get')
     {
       //load module
       $.ajax({
         url:'../../ctl/index.php?'+url,
         method:method,
         dataType:'json',
         data:asyncData,
         success:function(data){
           if(data.status=='suc')
           {
             callback(data);
           }
         },
         error:function(){
           alert("ajax error");
         }
       });
     }
     //get the detail
     function getInfo(data)
     {
       var info = data.detail;
       if(!info)return;
       $("a[name='Name']").html(info.strname);
       $("a[name='Admin']").html(info.strduty);
       $("a[name='Dtexpect']").html(info.dtexpect);
       $("a[name='Demo']").html(info.strdemo);
     }
     function initDetail(data)
     {       
      var detail = data.detail;
      //alert(data.status);
      if(detail.length==0)return;
      detail = detail[0];
      //alert($("#detailLog a[name='dtcreate']").text());
      $("#detailLog a[name='dtcreate']").text(detail.dtcreate);
      $("#detailLog a[name='strtitle']").text(detail.strtitle);
      $("#detailLog a[name='strbody']").text(detail.strbody);
      $("#ct").animate({left:'-800px'},300,function(){$("#allLog").css("background",'#0099CC');});
     }
     //render the logs
     function initLog(data)
     {
       $("#allLog").on('click','.row',function(){
         asyncMethod('ctl=Log&ac=detail',{"intdid":$(this).attr("name")},initDetail);
       });
       var ht="";
       $.each(data.logs,function(i,log){
         ht += "<div class='row' style='cursor:pointer;' name='"+log.intdid+"'>";
         ht += "<div class='span7'>";
         ht += "<a>"+log.dtcreate+"</a>";
         ht += "<a class='offset1'>"+log.strtitle+"</a>";
         ht += "</div>";
         ht += "<div class='span3'>删除&nbsp;编辑</div>";
         ht += "</div>";
         $("#allLog .grid").append(ht);
       });
     }
     //render the chart
     function render(data)
     {
       goog = [["6/22/2009",425.32], ["6/8/2009",424.84], ["5/26/2009",417.23], ["5/11/2009",390],
               ["4/27/2009",393.69], ["4/13/2009",392.24], ["3/30/2009",369.78], ["3/16/2009",330.16], ["3/2/2009",308.57],
               ["2/17/2009",346.45], ["2/2/2009",371.28], ["1/20/2009",324.7], ["1/5/2009",315.07], ["12/22/2008",300.36],
               ["12/8/2008",315.76], ["11/24/2008",292.96], ["11/10/2008",310.02], ["10/27/2008",359.36], ["10/13/2008",372.54],
               ["9/29/2008",386.91], ["9/15/2008",449.15], ["9/2/2008",444.25], ["8/25/2008",463.29],  ["8/11/2008",510.15],
               ["7/28/2008",467.86], ["7/14/2008",481.32], ["6/30/2008",537], ["6/16/2008",546.43], ["6/2/2008",567],
               ["5/19/2008",544.62], ["5/5/2008",573.2], ["4/21/2008",544.06], ["4/7/2008",457.45], ["3/24/2008",438.08],
               ["3/10/2008",437.92], ["2/25/2008",471.18], ["2/11/2008",529.64], ["1/28/2008",515.9], ["1/14/2008",600.25],
               ["12/31/2007",657], ["12/17/2007",696.69], ["12/3/2007",714.87], ["11/19/2007",676.7], ["11/5/2007",663.97],
               ["10/22/2007",674.6], ["10/8/2007",637.39], ["9/24/2007",567.27], ["9/10/2007",528.75], ["8/27/2007",515.25]];
       
       var plot1 = $.jqplot('chart1', [goog], {
         title: 'Google, Inc.',
         series: [{
           label: 'Google, Inc.',
           neighborThreshold: -1
         }],
         axes: {
           xaxis: {
             renderer:$.jqplot.DateAxisRenderer,
             tickRenderer: $.jqplot.CanvasAxisTickRenderer,
             tickOptions: {
               angle: -30
             }
           },
           yaxis: { 
                   renderer: $.jqplot.LogAxisRenderer,
                   tickOptions:{ prefix: '$' }
                   }
         },
         cursor:{
           show: true,
           zoom: true
         }
       });
     }
     function addLog()
     {
       var content = "<form id='addRec'>";
       content += "<input type='hidden' name='l[:strmid]' value='<?=$_GET['strmid'] ?>'/>";
       content += "<div class='input-control text'><input type='text' name='l[:strtitle]' placeHolder='简单说明'/><button class='helper'></button></div>";
       content += "<div class='input-control text'><input type='text' name='l[:ftrate]' placeHolder='占模块比例'/><button class='helper'></button></div>";
       content += "<div class='input-control textarea'><textarea  name='l[:strbody]' placeHolder='详细描述'></textarea></div>";
       content += "</form>"
       $.Dialog({
         'title':'添加日志',
         'content':content,
         'draggable':true,
         'closeButton':true,
         'buttonsAlign':'right',
         'buttons':{
           '提交':{
             'action':function(){
               $.ajax({
                 url:'../../ctl/index.php?ctl=Log&ac=addRec',
                 method:'POST',
                 dataType:'json',
                 data:$("#addRec").serialize(),
                 success:function(data){
                   if(data.status=="suc")
                   {
                     alert(data.status);
                   }
                 },
                 error:function(){
                   alert("ajax error");
                 }
               });
             }
           }
         }
       });
     }
    </script>
  </body>
</html>
